<!-- 消息提示 -->
<template>
<div class="message-wp">
  <button @click="cs1()">使用原始Message</button><button @click="cs2()">使用有限制的Message</button>
  <br/><br/>
  <button @click="cs3()">使用this.$message</button>
</div>
</template>
<script>

import MyMessage from "./message.js";
import {Message} from "element-ui";

export default {
  name: 'message',
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {
    cs1 () {
      let i = 0;
      let timer = setInterval(() => {
        Message.success('成功成功成功');
        i++;
        if (i >= 5) {
          clearInterval(timer);
        }
      }, 30);
    },
    cs2 () {
      let i = 0;
      let timer = setInterval(() => {
        MyMessage.success('成功成功成功');
        i++;
        if (i >= 5) {
          clearInterval(timer);
        }
      }, 30);
    },
    cs3 () {
      let i = 0;
      let timer = setInterval(() => {
        this.$message.success('成功成功成功');
        i++;
        if (i >= 5) {
          clearInterval(timer);
        }
      }, 30);
    }
  }
}
</script>
<style lang="scss" scoped>
.message-wp {
  text-align: center;
}
</style>